<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Line Chart</title>
	<script src="/js/Chart.bundle.js"></script>
	<style type="text/css">/* Chart.js */
		@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}</style>
	<script src="/js/utils.js"></script>
	<style>
	canvas{
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/jquery-ui.css"
		  type="text/css" />
</head>

<body>
	<!-- <div>
	
		选择日期:
		<input type="text" readonly="readonly" name="" class="ctroltime" id="startDateInput" placeholder="起始时间">
		<input type="text" readonly="readonly" name="" class="ctroltime" id="endDateInput" placeholder="截止时间">
		<input type="button" value="查询" onclick="reload();"/>
	</div>
	 -->
	<div style="width:100%;">
		<canvas id="canvas" width="1896" height="948" class="chartjs-render-monitor" style="display: block; height: 474px; width: 948px;"></canvas>
	</div>
	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-ui.min.js"></script>
	<script src="/js/bootstrap.min.js?v=3.3.6"></script>
	<script>
	/**
	$(function(){
        $.datepicker.setDefaults({
            showButtonPanel: true,
            beforeShow : function( input ) {
                setTimeout(function() {
                    var buttonPane = $(input)
                        .datepicker( "widget" )
                        .find( ".ui-datepicker-buttonpane" );
                    buttonPane.html('');
                    $( "<button>", {
                        text: "清除",
                        click: function() {
                            $.datepicker._clearDate(input);
                        }
                    }).addClass("ui-state-default ui-priority-primary ui-corner-all").appendTo( buttonPane );
                }, 1 );
            }
        });

        var dateFormat = "yy-dd-mm",
            from = $( "#startDateInput" ).datepicker({
                defaultDate: "+1w",
                dateFormat: "yy-mm-dd",
                changeMonth: true,
                numberOfMonths: 2
            }).on( "change", function() {
                to.datepicker( "option", "minDate", getDate( this ) );
            }),
            to = $( "#endDateInput" ).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                dateFormat: "yy-mm-dd",
                numberOfMonths: 2
            }).on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
            });

        function getDate( element ) {
            var date;
            try {
                date = $.datepicker.parseDate( dateFormat, element.value );
            } catch( error ) {
                date = null;
            }
            return date;
        };

    });**/
		function dataInit(){
			var data = getDateTime();
			$.ajax({
				type: "GET",
				url: "/achievement_date",
				data: data,
				dataType: "json",
				contentType:"application/json;charset=utf8",
				async:false,
				success: function(res){
					console.log(res);
					if(res.code != 0){
						alert("数据初始化失败");
						return ;
					}else{
						data = res.domain;
					}
				},
				complete:function(){
					
				}
			});
			return data;
		}
		
		function getDateTime(){
			var data = {};
			var startDate = $("#startDateInput").val();
			var endDate = $("#endDateInput").val();
			if(startDate != '' && endDate != ''){
				data.startDate = startDate;
				data.endDate = endDate;
			}
			return data;
		}
		
		function initData(){
			var data = getDateTime();
			$.ajax({
				type: "GET",
				url: "/achievement",
				data: data,
				dataType: "json",
				contentType:"application/json;charset=utf8",
				async:false,
				success: function(res){
					console.log(res);
					if(res.code != 0){
						alert("数据初始化失败");
						return ;
					}else{
						data = res.domain;
					}
				},
				complete:function(){
					
				}
			});
			return data;
		}
		var dateValue = dataInit();
		var dataValue = initData();
		console.log("数据加载完成");
		function reload(){
			dateValue = dataInit();
			dataValue = initData();
			window.myLine.update();
		}
		
		var config = {
			type: 'bar',
			data: {
				labels: dateValue,
				datasets: [{
					label: '会员数',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: dataValue,
					fill: false,
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: '最近新增会员图表'
				},
				tooltips: {
					enabled: true,
					position : 'average',
					mode: 'index',
					intersect: false
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '日期'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '人数'
						}
					}]
				}
			}
		};
		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};
	</script>
</body></html>